<template>
  <el-row >
    <!--    已发布素材展示区域-->
    <el-col :span="15" style="float: left">
      <!--  素材展示-->
      <div v-for="fit in fits" :key="fit"  style="float: left;padding-left: 10px">
        <!--每张SD素材布局-->
        <div style="display: flex;flex-direction: column;">
          <el-image style="width: 256px; height: 256px" :src="url" :fit="fit" />
          <span style="color: black;flex: 1; ">作品名称：</span>
          <span style="color: black;flex: 1; ">作者：</span>
          <span style="color: black;flex: 1; ">创建日期：</span>
          <span style="color: black;flex: 1; ">CFG：</span>
          <span style="color: black;flex: 1; ">Sampler：</span>
          <span style="color: black;flex: 1; ">正向Prompt：</span>
          <span style="color: black;flex: 1; ">负向Prompt：</span>
          <span style="color: black;flex: 1; ">迭代步数（Steps）：</span>
          <span style="color: black;flex: 1; ">备注：</span>
        </div>

      </div>


    </el-col>

    <el-col :span="9" style="">
      <!--      素材投稿区域-->
      <div>
        <el-form :model="form" label-width="120px">
          <el-form-item label="作品画作">
            <el-upload
                action="#"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-success="handleAvatarSuccess"
                :on-remove="handleRemove">

              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-form-item>
          <el-form-item label="作品名称">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="作者">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="创建日期">
            <el-date-picker
                v-model="form.date1"
                type="date"
                placeholder="选择时间"
                style="width: 100%"
            />
          </el-form-item>
          <el-form-item label="CFG">
            <el-slider v-model="form.cfg" show-input size="small"/>
          </el-form-item>
          <el-form-item label="采样器">
            <el-select v-model="form.region" placeholder="请选择采样器">
              <el-option label="DPM" value="DPM" />
              <el-option label="DPM2" value="DPM2" />
              <el-option label="DPM2 a" value="DPM2 a" />
              <el-option label="DPM++" value="DPM++" />
              <el-option label="DPM++2S a" value="DPM++2S a" />
              <el-option label="DPM++ 2M" value="DPM++ 2M" />
              <el-option label="DPM++SDE" value="DPM++SDE" />
              <el-option label="DPM fast" value="DPM fast" />
              <el-option label="DPM adaptive" value="DPM adaptive" />
              <el-option label="LMS karras" value="LMS karras" />
              <el-option label="DPM2 karras" value="DPM2 karras" />
              <el-option label="DPM2 a karras" value="DPM2 a karras" />
              <el-option label="DPM++2S a karras" value="DPM++2S a karras" />
              <el-option label="DPM++2M karras" value="DPM++2M karras" />
              <el-option label="DPM++SDE karras" value="DPM++SDE karras" />
              <el-option label="DPM++2M SDE karras" value="DPM++2M SDE karras" />
              <el-option label="PLMS" value="PLMS" />
              <el-option label="uinpc" value="uinpc" />
              <el-option label="Euler" value="Euler" />
              <el-option label="Euler a" value="Euler a" />
              <el-option label="Heun" value="Heun" />
              <el-option label="LCM" value="LCM" />
            </el-select>
          </el-form-item>
          <el-form-item label="正向 Prompt">
            <el-input
                v-model="form.textarea2"
                :autosize="{ minRows: 2, maxRows: 4 }"
                type="textarea"
                placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="负向 Prompt">
            <el-input
                v-model="form.textarea2"
                :autosize="{ minRows: 2, maxRows: 4 }"
                type="textarea"
                placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="迭代步数">
            <el-slider v-model="form.step" show-input size="small"/>
          </el-form-item>
          <el-form-item label="描述">
            <el-input
                v-model="form.textarea2"
                :autosize="{ minRows: 2, maxRows: 4 }"
                type="textarea"
                placeholder="请输入"
            />
          </el-form-item>


          <el-form-item>
            <el-button type="primary" @click="onSubmit">上传</el-button>
            <el-button>Cancel</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-col>
  </el-row>

</template>

<script >


export default {
  name: "AiPaint",
  data() {
    return {
      fits: ['contain', 'contain', 'contain', 'contain', 'contain', 'contain', 'contain', 'contain'],
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        cfg:5,
        textarea2:'',
        step:20,
        imageUrl:''
      },
      imageUrl:'',
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    onSubmit() {
      console.log('dwa')
    },
    handleAvatarSuccess(res, file,fileList) {
      console.log('jks;')
      console.log(fileList)
      this.imageUrl = URL.createObjectURL(file.raw);
      console.log(this.imageUrl)
      console.log('jks;')
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg/PNG';
      const isLt2M = file.size / 1024 / 1024 < 2;

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }

  }
}

</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>